/**
 * 封装概况
 */
import React from 'react';
import { Row, Col, Tabs, Avatar, List, Card,Form,Select,Modal,DatePicker,Button } from 'antd';
const TabPane = Tabs.TabPane;
const { Meta } = Card
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
// 引入Cookie
// import Cookie from 'js-cookie'
// 引入异步请求
// import { request } from 'config/request'
import { queryList } from './overviewServ'

import styles from './index.less'
import classnames from 'classnames/bind'
let cx = classnames.bind(styles);
// 导入项目全局配置文件
import config, { listConfig } from 'config/config'
const FormItem = Form.Item
const Option = Select.Option;
// const confirm = Modal.confirm;
const { MonthPicker, RangePicker } = DatePicker
import moment from 'moment'

// console.log(FormItem)
import ReactEcharts from 'echarts-for-react';
import ListPage from 'widget/PageTmpl/ListPage'
class UserPortrart extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      queryList: [],
      tableQuery: {
        startDate: moment().subtract(1,"months").format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD')
      },
    }
  }
  //完成：正在被重新渲染，状态已变化
  componentDidUpdate(prevProps, prevState) {
  }
  componentWillReceiveProps(nextProps) {

  }
  componentDidMount() {
    let params={}
    this.getList(params);
    // console.log(this.state)
  }
  componentWillUnmount() {

  }
  async getList(payload) {
    const _this = this
    let {success,rows} = await queryList(payload)
    // console.log(rows)
    if(success){
      _this.setState({
        queryList:rows
      });
      // console.log(this.state)
    }
    // this.state.list=rows
    // console.log(List)
    console.log('请求示例')
    //接口请求示例
    // return request({
    //   url: `admin/agent/list`,
    //   method: 'POST',
    //   data: {},
    //   headers: '',
    //   app: ''
    // }).then((result) => {
    //   let { rows } = result
    //   this.state.List = rows
    // })
  }



  render() {
    console.log('render')
    const { getFieldDecorator } = this.props.form
    let { tableQuery } = this.state
   

    let pieOption = {
        // color:['#B9D3EE','0877FD'],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        // legend: {
        //     orient: 'vertical',
        //     x: 'left',
        //     data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        // },
        title: {
            text: '性别分布',
            // subtext: '访问来源'
        },
        series: [
            {
                name:'性别分布',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                selectedMode: 'single',
                label: {
                    normal: {
                        show: false,
                        position: 'center',
                         
                    },
                    emphasis: {
                        show: true,
                         
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false,
                         padding: [2, 4],
                    }
                },
                data:[
                    {value:310, name:'女'},
                    {value:335, name:'男'},
                   
                ]
            }
        ]
    };

    let barOption1 = {
        title: {
            text: '年龄分布',
            // subtext: '数据来自网络'
        },
        color: ['#0877FD'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['18-24岁', '25-29岁', '30-39岁', '40-49岁'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'年龄分布',
                type:'bar',
                barWidth: '60%',
                data:[8, 7, 2, 1, ]
            }
        ]
    };

    
    const CardInfo = ({ month, week, day }) => (
      <div className={cx('cardInfo')}>
        <div>
          <span>月</span>
          <span className={cx('ml10')}>{month}</span>
        </div>
        <div>
          <span>周</span>
          <span className={cx('ml10')}>{week}</span>
        </div>
        <div>
          <span>天</span>
          <span className={cx('ml10')}>{day}</span>
        </div>
      </div>
    );
    
    let pageProps = {
      // ---------- 界面部分 ----------
      "ui": {
        // 页面接口地址
        "api_url": "admin/agent/queryBrokerByMobile",
        // 接口方式
        "method": "POST",
        "app": "",
        // 接口参数
        "params": "pageNo=1&pageSize=10",
        // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
        // "mockData": mockData,
        "mockData": null,
        // 查询栏
        "search_bar": {
          "fields": [
            {
              en_name: 'mobile',
              zh_name: '手机号码',
              elem_type: 'Input',
              elem_valid_type: 'string',
            },
          ],
          searchHandler: () => { // 自定义搜索按钮回调函数，点击搜索时触发
            console.log('search click')
          },
          resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
            console.log('reset click')
          },
          searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
            console.log('search finish', params)
          },
          pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
            'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
          ]
        },
        // 数据表格
        "table":
        {
          "status_params": "status=0",
          "status_text": "全部",
          // 表头字段列表
          "scroll": { x: 1000 },
          "fields": [
            {
              "en_name": "name",
              "zh_name": "姓名",
            },
            {
              "en_name": "mobile",
              "zh_name": "手机号",
              width: 130
            },
            {
              "en_name": "gender",
              "zh_name": "性别",
            },
            {
              "en_name": "createTime",
              "zh_name": "创建时间",
            },
          ]
        },
      },
    }


    //   console.log(this.props)
    return (
      <div>
        <CollapsiblePanels>
        <Row>
            <Col span={12}>
                <ReactEcharts option={pieOption} />
            </Col>
            <Col span={12}>
                <ReactEcharts option={barOption1} />
            </Col>
            
        </Row>
        </CollapsiblePanels>
        <CollapsiblePanels title={'页面访问数据'} hideUpDownBtn={true}>
          <ListPage pageProps={pageProps} />
        </CollapsiblePanels>

      </div>
    )
  }
}


export default Form.create()(UserPortrart)